<template>
<div class="aaaa">
  <el-card>
    <el-form ref="questionForm" :model="qsForm" :rules="qsRules">
      <el-form-item label="学科"  prop="subjectID">
        <el-select  placeholder="请选择" style="width: 25.5%" v-model="qsForm.subjectID">
          <el-option v-for="item in subjectOptions.items" :key="item.index" :label="item.subjectName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="目录" prop="catalogID">
        <el-select  placeholder="请选择" style="width: 25.5%" v-model="qsForm.catalogID">
          <el-option v-for="item in catalogOptions.items" :key="item.index" :label="item.subjectName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="企业" prop="enterpriseID">
        <el-select  placeholder="请选择" style="width: 25.5%" v-model="qsForm.enterpriseID">
          <el-option v-for="item in enterpriseOptions.items" :key="item.index" :label="item.shortName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-select v-model="qsForm.province" @change="getAreaOptions">
          <el-option v-for="item in cityOptions" :key="item" :label="item" :value="item"></el-option>
        </el-select>
        <el-select v-model="qsForm.city" style="width:210px;margin-left:4px">
          <el-option v-for="item in areaOptions" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向" prop="direction">
        <el-select  placeholder="请选择" style="width: 25.5%" v-model="qsForm.direction">
          <el-option v-for="item in directionOptions" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题型" prop="questionType">
          <el-radio-group @change="changeRadio({})" v-model="qsForm.questionType">
            <el-radio v-for="item in questionType" :key="item.value" :label="item.value + ''">{{ item.label }}</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="难度：" prop="difficulty">
          <el-radio-group v-model="qsForm.difficulty">
            <el-radio v-for="item in difficulty" :key="item.value" :label="item.value + ''">{{ item.label }}</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="题干">
        <quill-editor @blur="checkQustion" v-model="qsForm.question" :options="editorOption" class="bbb"></quill-editor>
      </el-form-item>
      <el-form-item prop="options" v-if="qsForm.questionType !== '3'" class="ccc" label="选项">
        <div class="option_item" v-for="item in qsForm.options" :key="item.code">
          <el-radio v-if="qsForm.questionType === '1'" @change="changeRadio(item)" v-model="item.isRight" style="margin-right:0" :label="true">{{ item.code }}：</el-radio>
          <el-checkbox v-if="qsForm.questionType === '2'" v-model="item.isRight" style="margin-right:0" :label="true">{{ item.code }}：</el-checkbox>
          <el-input v-model="item.title" style="width:240px"></el-input>
          <div class="avatar-uploader">
            <upimg size="mini" @img='qsForm.options.img = $event'>
            </upimg>
            <div class="ddd">上传图片</div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="解析视频">
        <el-input v-model="qsForm.videoURL" style="width:400px"></el-input>
      </el-form-item>
      <el-form-item label="答案解析" prop="question">
        <quill-editor @blur="checkQustion" v-model="qsForm.answer" :options="editorOption" class="bbb"></quill-editor>
      </el-form-item>
      <el-form-item label="题目备注" class="pdt">>
          <el-input type="textarea" :rows="4" v-model="qsForm.remarks" style="width:400px"></el-input>
      </el-form-item>
      <el-form-item label="试题标签：">
          <el-select style="width:400px" v-model="qsForm.tags" multiple filterable allow-create default-first-option placeholder="请选择试题标签">
            <el-option v-for="item in tagsOptions" :key="item.value" :label="item.label" :value="item.label"> </el-option>
          </el-select>
      </el-form-item>
      <el-form-item>
          <el-button v-if="!$route.query.id" @click="submit" type="primary">确认提交</el-button>
          <el-button v-else @click="update" type="success">确认修改</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { sublist, list } from '@/api/hmmm/directorys.js'
import { listQiYe } from '@/api/hmmm/companys.js'
import { provinces as getCityOptions, citys as getAreaOptions } from '@/api/hmmm/citys'
import { direction, questionType, difficulty } from '@/api/hmmm/constants'
import { getToken } from '@/utils/auth'
import upimg from '../components/up_img'
import { add, update ,detail} from '@/api/hmmm/questions'

export default {
  name: '',
  components: {
    quillEditor,
    upimg
  },
  props: {
  },
  data () {
    return {
      id:'',
      qsRules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'change' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'change' }],
        enterpriseID: [{ required: true, message: '请选择企业', trigger: 'change' }],
        city: [{ required: true, message: '请选择地区', trigger: 'change' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'change' }],
        questionType: [{ required: true, message: '请选择题型', trigger: 'change' }],
        difficulty: [{ required: true, message: '请选择难度', trigger: 'change' }]
        // question: [{ required: true, message: '请输入题干', trigger: 'blur' }]
      },
      token: getToken(),
      subjectOptions: [], // 学科下拉表单数据
      catalogOptions: [], // 目录下拉表单数据
      enterpriseOptions: [], // 企业下拉表单数据
      cityOptions: getCityOptions(), // 城市下拉表单数据
      areaOptions: [], // 城市下拉表单
      directionOptions: direction, // 方向下拉表单
      questionType, // 题型
      difficulty, // 难度
      tagsOptions: [], // 实体标签
      qsForm: {
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        province: '',
        city: '',
        direction: '',
        questionType: '1',
        difficulty: '1',
        question: '',
        videoURL: '',
        tags: '',
        options: [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ]
      },
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            // ['blockquote', 'code-block'], // 引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            // [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            // [{ script: 'sub' }, { script: 'super' }], // 上下标
            // [{ indent: '-1' }, { indent: '+1' }], // 缩进
            // [{ direction: 'rtl' }], // 文本方向
            // [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            // [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            // [{ font: [] }], // 字体
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除字体样式
            ['image', 'video'] // 上传图片、上传视频
          ]
        }
      }
    }
  },
  computed: {},
  watch: {},
  async created () {
    this.getSubjectOptions()
    this.getMLOptions()
    this.getenterpriseOptions()
    this.id = this.$route.query.id
    if(this.id){
      const {data} = await detail({id:this.id})
      this.qsForm = data
    }
  },
  mounted () {},
  methods: {

    // 获取学科下拉表单
    async getSubjectOptions () {
      const res = await sublist()
      this.subjectOptions = res.data
    },
    // 获取目录下拉表单
    async getMLOptions () {
      const res = await list()
      this.catalogOptions = res.data
    },
    // 获取企业下拉表单
    async getenterpriseOptions () {
      const res = await listQiYe()
      this.enterpriseOptions = res.data
    },
    // 城市
    getAreaOptions (cityName) {
      this.qsForm.city = null
      this.areaOptions = getAreaOptions(cityName)
    },
    // 富文本编辑器验证规则
    checkQustion () {
      this.$refs.questionForm.validateField('question')
    },
    changeRadio (item) {
      this.qsForm.options.forEach(item => {
        item.isRight = false
      })
      item.isRight = true
    },
    update () {
      this.$refs.questionForm.validate(async valid => {
        if (valid) {
          const data = { ...this.qsForm }
          console.log(data)
          // data.tags = data.tags.join(',')
          data.videoURL = data.videoURL ? data.videoURL : ' '
          await update(data)
          this.$message.success('修改成功')
          this.$router.push('/questions/list')
          console.log(data)
        }
      })
    },
    submit () {
      this.$refs.questionForm.validate(async valid => {
        if (valid) {
          const data = { ...this.qsForm }
          data.tags = data.tags.join(',')
          await add(data)
          this.$message.success('添加成功')
          this.$router.push('/questions/list')
        }
      })
    }
  }
}
</script>

<style>
.pdt{
  padding-top: 40px;
}
.ddd{
  position: relative;
    top: -27px;
    left: 25px;
}
.bbb {
    height: 300px;
    padding-left:80px;
  }
  .ccc{
    padding-top: 50px;
    /* padding-left: 40px; */
  }
  .question-new ::v-deep .ql-editor {
  height: 200px;
}
.question-new ::v-deep .ql-toolbar.ql-snow {
  padding: 0 8px;
}
.option_item {
  padding-bottom: 20px;
   padding-left: 40px;
}
.avatar-uploader {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  padding-left: 10px;
}
.question-new ::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  width: 100px;
  height: 60px;
  line-height: 60px;
}
.question-new ::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.question-new ::v-deep .avatar-uploader i {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
  background: #fff;
  font-size: 18px;
  color: #999;
}
.avatar {
  width: 100px;
  height: 60px;
  display: block;
  overflow: hidden;
}
.el-upload--picture-card {
  width: 100px!important;
  height:50px!important;
  font-size: 14px!important;
  padding-left: 20px!important;
}
.aaaa {
  padding: 15px;
}
</style>
